<template>
    <div style="width: 100%;">
        <custom-tabbar title="意见反馈" />
        <!-- <image src="/static/english/english_top_bg.png" class="topBg" /> -->
        <div class="text">
            <textarea class="message_input" v-model="content" placeholder-style="color:#798195; font-size: 32rpx;font-weight: 400;" placeholder="请描述您的意见或者反馈..."/>
        </div>
        <span  class="phone">微信/手机号</span>
        <div class="input">
            <input class="input" type="text" v-model="phone" placeholder="请留下您的联系方式" placeholder-class="input-placeholder" />
        </div>
        <div class="footer" @click="handleSubmit">
            确定提交
        </div>
    </div>
</template>

<script setup>
    import { ref, reactive, onMounted, onUnmounted } from 'vue';
    import customTabbar from '@/components/customTabbar/index.vue';
    import { feedbackApi } from '@/apis/index';
    import { Toast } from '@/utils/tools';
    const content = ref();
    const phone = ref();
    const handleSubmit = async()=>{
        const data = {
            feedbackContent: content.value,
            mobile: phone.value,
        }
        const res = await feedbackApi(data);
        Toast({title: '提交成功', duration: 2000})
        setTimeout(()=>{
            uni.navigateBack();
        }, 1000)
    }
</script>

<style lang="scss">
.topBg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 445rpx;
    z-index: -1;
}
.text{
    width: calc(100% - 64rpx);
    margin: 40rpx 32rpx;
    height: 400rpx;
    background: #F0F3F7;
    border-radius: 24rpx;
    .message_input{
        height: 376rpx;
        width: 622rpx;
        margin-left: 32rpx;
        padding-top: 24rpx;
        font-weight: 500;
        font-size: 32rpx;
    }
}
.phone{
    width: calc(100% - 64rpx);
    margin: 0 32rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #B3B3B3;
}
.input{
    width: calc(100% - 64rpx);
    height: 96rpx;
    margin: 0 32rpx;
    border-radius: 20rpx;
    margin-top: 24rpx;
    background: #F0F3F7;
}
.input-placeholder{
    font-weight: 400;
    font-size: 32rpx;
    color: #798195;
}
.footer{
    position: fixed;
    bottom: 88rpx;
    width: calc(100% - 64rpx);
    height: 96rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 48rpx;
    color: #fff;
    margin: 0 32rpx;
    background: linear-gradient( 315deg, rgba(78,197,132,0.6) 0%, #4ec584 100%);
}
</style>